<template>
    <el-card>
        <el-row justify="space-between">
            <el-col :span="1.5">
                <div style="font-size: 18px; line-height: 30px;">
                    <strong>供应商整体浏览表</strong>
                </div>
            </el-col>
            <el-col :span="1.5">
                <div style="display: flex; align-items: center;">
                    <span>查询日期：</span>
                    <el-date-picker type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                </div>
            </el-col>
        </el-row>

        <div ref="chartRef" style="width: 100%; height: 400px;"></div>
    </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref<HTMLElement | null>(null);

const chartData = {
    suppliers: ['供应商1', '供应商2', '供应商3', '供应商4', '供应商5', '供应商6', '供应商7', '供应商8', '供应商9', '供应商10'],
    types: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6', '类型7', '类型8', '类型9', '类型10'],
    values: [
        [10, 20, 30, 40, 50, 60, 70, 80, 90, 100], // 供应商1 的数据
        [5, 15, 25, 35, 45, 55, 65, 75, 85, 95],
        [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
        [5, 15, 25, 35, 45, 55, 65, 75, 85, 95],
        [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
        [5, 15, 25, 35, 45, 55, 65, 75, 85, 95],
        [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
        [5, 15, 25, 35, 45, 55, 65, 75, 85, 95],
        [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
        [5, 15, 25, 35, 45, 55, 65, 75, 85, 95]
    ]
};

onMounted(() => {
    if (chartRef.value) {
        const chart = echarts.init(chartRef.value);
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: chartData.types,
                top: 'top'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: chartData.suppliers,
                axisLabel: {
                    interval: 0,
                    rotate: 45
                }
            },
            yAxis: {
                type: 'value'
            },
            series: chartData.types.map((type, index) => ({
                name: type,
                type: 'bar',
                label: {
                    show: true,
                    position: 'insideTop'
                },
                emphasis: {
                    focus: 'series'
                },
                data: chartData.values.map(supplierValues => supplierValues[index])
            })),
            dataZoom: [
                {
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,
                    end: 50
                },
                {
                    type: 'inside',
                    xAxisIndex: [0],
                    start: 0,
                    end: 50
                }
            ]
        };
        chart.setOption(option);
    }
});
</script>
<style lang="scss" scoped></style>